<template>

  <div class="order-detail">
    <p class="r-bg">
      {{orderData.orderStatus == 0 ? '待付款' : orderData.orderStatus == 1 ? '待发货' : orderData.orderStatus == 2 ? '待收货' : '已完成'
      }}</p>
    <!--收货信息-->
    <div class="recipient-info">
      <div class="fl-box">
        <div>收货人：{{orderData.receiver}}</div>
        <div><a :href="'tel:'+atel" style="color: #3399ea">{{orderData.mobile}}</a></div>
      </div>
      <div class="address">
        收货地址：{{orderData.address}}
      </div>
    </div>
    <!--？？-->
    <template v-if="true">
      <div class="message">
        <p>我的留言</p>
        <div class="m-content">{{orderData.message}}</div>
        <!--<ul class="tips-ul">-->
        <!--<li v-for="item in messageTips"><span :style="{background:libg[Math.floor(Math.random()*10)]}">{{item}}</span>-->
        <!--</li>-->
        <!--</ul>-->
      </div>
      <div class="message" v-if="orderData.agentId!=null">
        <p>{{orderData.agent.level==3?'侍酒师':orderData.agent.level==4?'银牌代理':orderData.agent.level==5?'金牌代理':'区域总代'}}</p>
        <div class="avatar-box">
          <img :src="sourceUrl+orderData.agent.imageUrl" alt="">
          <span>{{orderData.agent.name}}</span>
        </div>
        <div class="fl-box" v-if="orderType==2">
          <div class="fb-left">
            预约时间：{{orderData.boxTime}}
          </div>
          <div class="fb-right">人数：{{orderData.boxSum}}人</div>
        </div>
        <div class="fl-box" >
          <div class="fb-left">
            联系电话：<a :href="'tel:'+atel" style="color: #3399ea">{{atel}}</a>
          </div>
        </div>
      </div>
    </template>

    <!--商品-->
    <div class="tab-content">
      <div class="fl-box">
        <div>商品</div>
        <div></div>
      </div>
      <ul class="order-box">
        <li v-for="(item,index) in orderData.orderGoodsList">
          <div class="li-left">
            <img :src="sourceUrl+item.goods.goodsImg" alt="">
            <!--<img src="/static/img/p-1.1f60eee.png" alt="">-->
          </div>
          <div class="li-right">
            <p class="li-title">{{item.goods.goodsName}}</p>
            <div class="li-describe">{{item.goods.goodsDesc}}</div>
            <div class="fl-box">
              <div class="fb-left">
                ￥{{item.price}}
              </div>
              <div class="fb-right">
                x{{item.orderNumber}}
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="sommelier-box" v-if="orderData.tip!=null">
        <div class="sommelier" v-if="orderData.tip!=null">
          <span>侍酒师感谢金</span>
          <span>￥{{orderData.tip}}</span>
        </div>
        <div class="sommelier" v-if="orderData.tip!=null">
          <span>实付款(含感谢金)</span>
          <span class="total-money">￥{{orderData.totalMoney}}</span>
        </div>
      </div>
      <div class="btn-box" v-if="orderData.tip==null">
        <span>实付款</span>
        <span>￥{{orderData.totalMoney}}</span>
      </div>
    </div>
    <!--订单编号时间-->
    <div class="order-num">
      <p class="num-box">订单编号：{{orderData.billNo}}</p>
      <ul>
        <li>创建时间：{{orderData.createTime}}</li>
        <li v-if="orderData.payTime!=null">付款时间：{{orderData.payTime}}</li>
        <li v-if="orderData.deliveryTime!=null">发货时间：{{orderData.deliveryTime}}</li>
        <li v-if="orderData.turnoverTime!=null">成交时间：{{orderData.turnoverTime}}</li>
      </ul>
    </div>

    <!--底部功能-->
    <footer v-if="option!='fromBusiness'">
      <!--<span @click="deleteOrder()">删除订单</span>-->
      <div v-if="orderData.orderStatus==0">
        <span  @click="deleteOrder(items.id)">删除订单</span>
      </div>
      <div v-if="orderData.orderStatus==1">
        <span  @click="deleteOrder(orderData.id)" v-if="orderData.cancel==1||orderData.isRec==2">删除订单</span>
        <span  @click="quxiaoOrder(orderData.id)" v-if="orderData.orderGoodsList[0].goods.upgradePatch==0&&orderData.isRec!=2&&orderData.cancel==0">取消订单</span>
      </div>
      <div v-if="orderData.orderStatus==2">
        <span @click="updateOrder(orderData.id)">确认收货</span>
      </div>
      <div v-if="orderData.orderStatus==3">
        <router-link :to="'/evaluate?id='+orderData.billNo" v-if="orderData.isEvaluate==0">
          <span>我要评价</span>
        </router-link>
        <span @click="deleteOrder(orderData.id)"  v-if="orderData.isEvaluate!=0">删除订单</span>
      </div>
      <!--<router-link :to="'/evaluate?id='+orderData.billNo" v-if="orderData.orderStatus==3">-->

        <!--<span v-if="orderData.isEvaluate==0">我要评价</span>-->
      <!--</router-link>-->
      <!--<span @click="updateOrder(orderData.id)" v-if="orderData.orderStatus==2">确认收货</span>-->
      <!--<router-link :to="'/evaluate?id='+orderData.billNo" v-if="orderData.isEvaluate==0">-->
        <!--<span>我要评价</span>-->
      <!--</router-link>-->
      <!--<span @click="deleteOrder(orderData.id)"  v-if="orderData.isEvaluate!=0">删除订单</span>-->
    </footer>
    <footer v-if="option=='fromBusiness'">
      <div v-if="orderData.orderStatus==1&&orderData.isRec == 0">
        <span @click="rejectOrder(orderData.billNo)" v-if="orderData.orderGoodsList[0].goods.upgradePatch==0">拒绝接单</span>
        <span @click="receiveOrder(orderData.billNo)">立即接单</span>
      </div>
      <div v-if="orderData.orderStatus==1&&orderData.isRec == 1">
        <span @click="deliverOrder(orderData.billNo)">立即发货</span>
      </div>
      <div v-if="orderData.orderStatus==3">
        <span class="bc-ee" @click="deleteOrder1(orderData.id)">删除订单</span>
      </div>
    </footer>
  </div>

</template>

<script>
  import global from '../public/global.vue'

  export default {
    name: 'orderDetail',
    data() {
      return {
        orderData: {},//订单数据列表
        //messageTips: ['重要客户', '重要客户', '重要客户'],//留言标签
        libg: ["#FCBD06", "#FB3C3D", "#50BDEF", "#FF9452", "#FF6978", "#E65BEB", "#72A4FF", "#47D844", "#3BD3F2", "#FF6A4D"],//标签背景颜色
        sourceUrl: global.sourceUrl,
        option: '',//跳转来源
        orderType: 0,
        atel:'',
      }
    },
    methods: {
      quxiaoOrder(id){
        if(window.confirm('你确定要取消么？')){
          let self = this;
          let url = global.apiUrl;
          let data = "?id=" + id;
          self.$http.get(url + '/order/cancelOrder' + data)
            .then(res => {
              alert(res.data.msg);
              setTimeout(function () {
                self.$router.go(0)
              },1000)
            }).catch(function (err) {
            console.error(err);
          })
        }

      },
      deleteOrder(id) {
        let self = this;
        let url = global.apiUrl;
        let data = "?id=" + id;
        self.$http.get(url + '/order/deleteOrder' + data)
          .then(res => {
            alert(res.data.msg);
            setTimeout(function () {
              self.$router.go(-1)
            },1000)
          }).catch(function (err) {
          console.error(err);
        })
      },
      deleteOrder1(id) {
        let self = this;
        let url = global.apiUrl;
        let data = "?id=" + id;
        self.$http.get(url + '/order/deleteOrderByUser' + data)
          .then(res => {
            alert(res.data.msg);
            setTimeout(function () {
              self.$router.go(-1)
            },1000)
          }).catch(function (err) {
          console.error(err);
        })
      },
      //去订单详情
      goOrderDetail() {
        alert('去订单详情');
      },
      receiveOrder(billNo) {
        console.log(billNo)
        let url = global.apiUrl;
        let params = new URLSearchParams();
        params.append("billNo", billNo);
        this.$http({
          url: global.apiUrl + '/business/receiveOrder',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg);
            setTimeout(function () {
              this.$router.go(0)
            },1000)
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      rejectOrder(billNo) {
        let params = new URLSearchParams();
        params.append("billNo", billNo);
        this.$http({
          url: global.apiUrl + '/business/rejectOrder',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg);
            setTimeout(function () {
              this.$router.go(0)
            },1000)
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      deliverOrder(billNo) {
        let url = global.apiUrl;
        let params = new URLSearchParams();
        params.append("billNo", billNo);
        this.$http({
          url: global.apiUrl + '/business/deliverOrder',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg);
            setTimeout(function () {
              this.$router.go(0)
            },1000)
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      //收货
      updateOrder(id) {
        let self = this;
        let url = global.apiUrl;
        self.$http.get(url + '/order/updateOrder?id='+id).then(res => {
          alert("收货成功");
          if(res.data.data==0){
            setTimeout(function () {
              self.$router.go(0)
            },1000)
          }


        })
      },
    },
    created: function () {
      document.title = "订单详情";
    },
    mounted() {
      let self = this;
      let url = global.apiUrl;
      let billNo = self.$route.query.billNo;
      self.option = self.$route.query.option
      self.$http.get(url + '/order/orderDetail?billNo=' + billNo)
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            self.orderData = res.data.data;
            if (res.data.data.orderType == 2) {
              this.orderType = 2
            }
            self.$http.get(url + '/user/getUserInfoByid?id=' + self.orderData.agentId).then(res => {
                self.atel=res.data.data.mobile
            })

          }
        }).catch(function (err) {
        console.error(err);
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .order-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    padding-bottom: 3rem;
    background: #f3f3f3;
    .r-bg {
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      font-size: 1.2rem;
      color: #fff;
      text-align: center;
      background: #D43F3F;
    }
    /*收货信息*/
    .recipient-info {
      width: 100%;
      padding: 10px 2.5%;
      background: #fff;
      margin-bottom: 10px;
      font-size: 1rem;
      color: #333;
      .fl-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    /*我的留言*/
    .message {
      width: 100%;
      padding: 0% 2.5%;
      background: #fff;
      margin-bottom: 10px;
      color: #333;
      font-size: 1rem;
      p {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        border-bottom: 1px solid #eee;
      }
      .m-content {
        width: 100%;
        padding: 2% 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .tips-ul {
        width: 100%;
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          margin-bottm: 10px;
          margin-right: 2%;
          span {
            padding: 4px 10px;
            border-radius: 30px;
            font-size: 0.8rem;
            color: #fff;
          }
        }
      }
    }
    /*侍酒师*/
    .avatar-box {
      width: 100%;
      padding: 10px 0;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
      }

    }
    .fl-box {
      width: 100%;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 0.9rem;
    }

    /*商品*/
    .tab-content {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
      .fl-box {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        color: #333;
      }
      .order-box {
        width: 100%;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        li {
          width: 100%;
          padding: 3% 0;
          display: flex;
          .li-left {
            flex: 1;
            img {
              width: 100px;
              height: 100px;
              vertical-align: middle;
            }
          }
          .li-right {
            flex: 2;
            .li-title {
              font-size: 0.95rem;
              color: #333;
            }
            .li-describe {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin: 2% auto;
              font-size: 0.8rem;
              color: #666;
            }
            .fl-box {
              height: 1rem;
              line-height: 1rem;
              font-size: 0.9rem;
              .fb-left {
                color: #666;
              }
              .fb-right {
                color: #666;
              }
            }
          }
        }
      }
      .btn-box {
        width: 100%;
        /*height: 3rem;*/
        line-height: 3rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.95rem;
        span {
          color: #333;
        }
        span:last-child {
          color: #D43F3F
        }
      }
      .sommelier-box {
        width: 100%;
        padding: 10px 0;
        .sommelier {
          width: 100%;
          line-height: 1.8rem;
          display: flex;
          justify-content: space-between;
          font-size: 0.95rem;
          color: #333;
          .total-money {
            color: #ff0000;
          }
        }
      }
    }
    /*订单编号时间*/
    .order-num {
      width: 100%;
      padding: 3% 2.5%;
      background: #fff;
      font-size: 0.95rem;
      color: #aaa;
      .num-box {
        margin-bottom: 3%;
      }
    }
    /*底部功能*/
    footer {
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      padding: 0 2.5%;
      box-sizing: border-box;
      background: #fff;
      text-align: right;
      font-size: 1rem;
      color: #aaa;
      span {
        border: 1px solid #BEBEBE;
        padding: 1% 4%;
        border-radius: 4px;
      }
      span:last-child {
        border-color: #DA5A5A;
        color: #DA5A5A;
        margin-left: 2%;
      }
    }
  }
</style>
